<template>
	<el-dialog draggable v-model="dialogShow" :close-on-click-modal="false" width="60%" @close="onClose">
		<el-form ref="formRef" :rules="formRules" :model="formData" size="default" label-width="100px">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="类型名称" prop="Name">
						<el-input v-model="formData.Name" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="类型代码" prop="Code">
						<el-input v-model="formData.Code" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="类型状态" prop="Status">
						<el-switch v-model="formData.Status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-form-item label="类型备注" prop="Desc">
						<el-input v-model="formData.Desc" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					<el-button size="default" type="primary" class="ml20" @click="onAddData">
						<el-icon>
							<ele-FolderAdd />
						</el-icon>
						新增数据
					</el-button>
				</el-col>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-row :gutter="30" v-for="(v, k) in formData.DictDatas" :key="k">
						<el-divider>字典数据</el-divider>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
							<el-form-item :prop="`DictDatas[${k}].Name`" :rules="{ required: true, message: '字典名称不可为空', trigger: 'blur' }">
								<template #label>
									<el-button type="danger" circle size="small" @click="onRemoveData(k)" class="mt3">
										<el-icon>
											<ele-Delete />
										</el-icon>
									</el-button>
									<span class="ml10">字典名</span>
								</template>
								<el-input v-model="v.Name" style="width: 100%" placeholder="请输入字典名称"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
							<el-form-item label="字典值1" :prop="`DictDatas[${k}].Value1`">
								<el-input v-model="v.Value1" style="width: 100%"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
							<el-form-item label="字典值2" :prop="`DictDatas[${k}].Value2`">
								<el-input v-model="v.Value2" style="width: 100%"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
							<el-form-item label="字典值3" :prop="`DictDatas[${k}].Value3`">
								<el-input v-model="v.Value3" style="width: 100%"> </el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
							<el-form-item label="排序" :prop="`DictDatas[${k}].Sort`">
								<el-input-number v-model="v.Sort" controls-position="right" class="w100" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
							<el-form-item label="状态" :prop="`DictDatas[${k}].Status`">
								<el-switch v-model="v.Status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
							</el-form-item>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onClose" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { Ref, ref, reactive } from 'vue';
import { Get, Post, Put } from '/@/common/http';
import EMsg from '/@/common/eMsg';
const dialogShow = ref(false);

const formRef = ref();
const formRules = ref({
	Name: [{ required: true, message: '类型名称不可为空', trigger: 'blur' }],
});

const formData: Ref = ref<any>({
	Id: 0,
	Name: '',
	Code: '',
	Desc: '',
	Status: true,
	DictDatas: reactive<any>([]),
});

const onShow = (id: number) => {
	dialogShow.value = true;
	formData.value.Id = id;
	if (id > 0) {
		Get('SysDict/GetSysDictTypeDetail', { Id: id }).then((res: any) => {
			formData.value = res.Data;
			Get('SysDict/GetDictDataList', { id: formData.value.Id }).then((res2: any) => {
				formData.value.DictDatas = res2.Data;
			});
		});
	}
};
const onClose = () => {
	formData.value.Id = 0;
	formRef.value.resetFields();
	formData.value.DictDatas = [];
	dialogShow.value = false;
};
const onSubmit = () => {
	formRef.value.validate((valid: any) => {
		if (valid) {
			if (formData.value.Id > 0) {
				Put('SysDict/PutSysDictType', formData.value, () => {
					EMsg.success('修改成功');
					onClose();
					emit('refresh');
				});
			} else {
				Post('SysDict/AddSysDictType', formData.value, () => {
					EMsg.success('添加成功');
					onClose();
					emit('refresh');
				});
			}
		}
	});
};

const onAddData = () => {
	const obj = reactive<any>({
		TypeId: formData.value.Id,
		Name: '',
		Value1: '',
		Value2: '',
		Value3: '',
		Sort: formData.value.DictDatas.length,
		Status: true,
	});
	formData.value.DictDatas.push(obj);
};

const onRemoveData = (index: number) => {
	EMsg.confirm(`确定删除该数据？提交后生效`, () => {
		formData.value.DictDatas.splice(index, 1);
	});
};

const emit = defineEmits(['refresh']);
defineExpose({
	onShow,
});
</script>
